<template>
    <div class="login" id="login" @keyup.enter="submitForm">
    <div class="form-wrap">
      <div class="login-title">平达管理系统</div>
      <el-form class="form-container" ref="form" :model="form" label-width="53px">
        <el-form-item label="帐号" :erroe="userError">
          <el-input size="small" v-model="form.username" v-on:blur="userBlur"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" size="small" v-model="form.password" @blur="passwordBlur"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="submitForm('form')" :loading="loading">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import AjaxResquest from '@/api/apiRequest';
@Component({})
export default class Login extends Vue {
  // mounted
  loading: boolean = false;
  form = {
    username: '',
    password: ''
  };
  loginRes!: AjaxResquest;
  infoRes!: AjaxResquest;
  userError: string = '';
  mounted() {
    // this.loginRes = new apiRequest('/login', { a: 1 });

    this.loginRes = new AjaxResquest('/login');
    this.infoRes = new AjaxResquest('/auth/info');
    console.log(typeof this.loginRes);
  }
  // methods
  submitForm() {
    if (this.form.username !== '' && this.form.password !== '') {
      this.loading = true;
      let data = {
        username: this.form.username,
        pwd: this.form.password
      };
      this.loginRes.getFunction(data).then((res: any) => {
        if (res.data.code === 1) {
          sessionStorage.setItem('token', res.data.data.token);
          this.infoRes.getFunction().then((res: any) => {
            this.loading = false;
            if (res.data.code === 1) {
              this.$message.success('登录成功');
              // this.$router.push({ name: 'produceCategory' });
              this.$to('homePage');
              let roles: any[] = [];
              let temp = res.data.data.menu;
              temp.forEach((e: any) => {
                roles.push(e.id);
                e.data.forEach((i: any) => {
                  roles.push(i.id);
                });
              });
              console.log(roles);
              sessionStorage.setItem('roles', JSON.stringify(roles));
            }
          });
        } else {
          this.loading = false;
        }
      });
    } else {
      this.$message.error('用户名或密码不能为空');
      // alert('用户名或密码不能为空');
      return;
    }
  }
  userBlur(): void {
    if (this.form.username === '') {
      this.userError = '用户名不能为空!';
      console.log(this.userError);
    }
  }
  passwordBlur(): void {}
}
</script>
<style lang="less">
#login {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../assets/bg-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .form-wrap {
    width: 450px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    .login-title {
      height: 120px;
      background-color: #d85354;
      line-height: 120px;
      font-size: 34px;
      color: #fff;
      text-align: center;
      letter-spacing: 5px;
    }
    .form-container {
      display: flex;
      height: 200px;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
      input {
        width: 250px;
      }
    }
  }
}
</style>
